<template>
  <Placeholder :data="data" :placeholder="placeholder">
    <span :class="className">
      <template v-if="emoji">
        <span class="emoji">{{ emoji }}</span>
      </template>
      <template v-else> {{ null }} </template>
      {{ texts.filter(Boolean).join(' . ') }}
    </span>
  </Placeholder>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import Placeholder from '@/components/Placeholder/index.vue'
import { IPLocation as IPLocationType } from '@/constants/general'
import { countryCodeToEmoji } from '@/transformers/emoji'

const props = defineProps({
  data: {
    type: Object as PropType<IPLocationType | null>,
  },
  fullname: Boolean,
  className: String,
  placeholder: String,
})

const texts = props.fullname
  ? [props.data?.country, props.data?.region, props.data?.city]
  : [props.data?.country_code || props.data?.country, props.data?.city]
const emoji = props.data?.country_code && countryCodeToEmoji(props.data.country_code)
</script>

<style lang="less" scoped>
.emoji {
  margin-right: 0.3em;
  font-size: 140%;
  vertical-align: middle;
  line-height: 0;
}
</style>
